<template>
	<view class="collapse">
		<view @click="onClick(!isOpen)" class="collapse-title">
			<view class="collapse-title-wrap">
				<slot name="title">
					<view class="collapse-title-box">
						<text class="collapse-title-text">{{title}}</text>
					</view>
				</slot>
			</view>
			<view class="circle">
				<view class="triangle animation down" :class="{active: isOpen}"></view>
			</view>
		</view>
		<view class="collapse_wrap transition" :style="{height: (isOpen?height:0)+'px'}">
			<view :id="elId" class="collapse_wrap-content" :class="{open:isheight}">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"collapse",
		props:{
			title: {
				type: [String, Number],
				default: ''
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
				isOpen: false,
				isheight: null,
				elId,
				height: 0
			};
		},
		methods:{
			getCollapseHeight(type, index = 0) {
				const views = uni.createSelectorQuery().in(this)
				views
					.select(`#${this.elId}`)
					.fields({
						size: true
					}, data => {
						// TODO 百度中可能获取不到节点信息 ，需要循环获取
						if (index >= 10) return
						if (!data) {
							index++
							this.getCollapseHeight(false, index)
							return
						}
						// #ifdef APP-NVUE
						this.height = data.height + 1
						// #endif
						// #ifndef APP-NVUE
						this.height = data.height
						// #endif
						this.isheight = true
						if (type) return
						// this.onClick(this.open,'init')
					})
					.exec()
			},
			onClick(state){
				this.isOpen = state
				this.$nextTick(function(){
					this.getCollapseHeight();
				})
			}
		},
		mounted() {
			this.getCollapseHeight();
		}
	}
</script>

<style lang="scss" scoped>
$circle-radio: 58.82rpx;
$triangle-slid-size: $circle-radio*0.4;
$triangle-bottom-size: $circle-radio*0.5;
$triangle-margin-top: $circle-radio*0.1;

.collapse{
	&-title{
		display: flex;
		justify-content: right;
		align-items: center;
		margin-left: 11.76rpx;
		&-wrap{
			flex: 1;
			font-size: 38.82rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #1D786C;
		}
		.circle{
			width: $circle-radio;
			height: $circle-radio;
			margin-right: 23.52rpx;
			
			background: #299384;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.triangle{
				width: 0;
				height: 0;
				border-left: $triangle-slid-size solid transparent;
				border-right: $triangle-slid-size solid transparent;
			}
			.up{
				margin-top: -$triangle-margin-top;
				border-bottom: $triangle-bottom-size solid #FFFFFF;
			}
			.down{
				margin-top: $triangle-margin-top;
				border-top: $triangle-bottom-size solid #FFFFFF;
			}
			.active {
				margin-top: -$triangle-margin-top;
				transform: rotate(180deg);
			}
			.animation {
				transition-property: transform;
				transition-duration: 0.3s;
				transition-timing-function: ease;
			}
		}
	}
	&_wrap{
		/* #ifndef APP-NVUE */
		will-change: height;
		box-sizing: border-box;
		/* #endif */
		overflow: hidden;
		// position: relative;
		height: 0;
		&.transition{
			transition-property: height, border-bottom-width;
			transition-duration: 0.3s;
		}
		
		&-content {
			// position: absolute;
			font-size: 13px;
			color: #303133;
			// transition: height 0.3s;
			border-bottom-color: transparent;
			border-bottom-style: solid;
			border-bottom-width: 0;
		}
	}
}
</style>
